<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, onUnmounted } from 'vue';
import importdanger from '../assets/icon/iconicon/预警.png';
import importall from '../assets/icon/iconicon/所有告警-2.png';
import importprocessed from '../assets/icon/iconicon/已处理告警.png';
import importunprocessed from '../assets/icon/iconicon/未处理告警-2.png';
import * as echarts from 'echarts';
import reDangerDialog from '@/components/reDangerDialog.vue';
import dangerDetailDialog from '@/components/dangerDetail.vue';
import { io } from 'socket.io-client'
import axios from 'axios';
import { marked } from 'marked';

const socket = ref(null);
const data = ref(null);
const loading = ref(true);
const dangerList = ref(null);
const redangerList = ref(null);
const dangerChartData = ref(null);
const redangerChartData = ref(null);
const optionChart1 = ref(null);
const optionChart2 = ref(null);
const ganderItemData = ref({})
const alertDetail = ref('告警详细');
const allUpdatePaperCon = ref(`
# 暂无数据
`)
const allPaperTitle = ref('总报告')

onMounted(() => {
    console.log('onMounted ing');
    
    initSocket();
    nextTick(() => {
        initChart();
    })
    
    console.log('data a:', data.value);
});
onUnmounted(() => {
    socket.value.on('disconnect', (reason) => {
        console.log("Socket.IO 断开连接:", reason);
    });
})
function initChart() { 
    // 确保DOM元素已渲染
    if(!chartRef1.value){
        return;
    }
    if (!myChart1) {
        myChart1 = echarts.init(chartRef1.value);
    }
    if(!chartRef2.value){
        return;
    }
    if (!myChart2) {
        myChart2 = echarts.init(chartRef2.value)
    }
    myChart1.setOption(createChart1Option());
    myChart2.setOption(createChart2Option());
    window.addEventListener('resize', () => {
        if (myChart1) {
            myChart1.resize();
        }
        if (myChart2) {
            myChart2.resize();
        }
    });
}
// 深拷贝函数
function deepCopy(obj) {
    return JSON.parse(JSON.stringify(obj));
}
// 更新所有数据
function updateAllData(parsedData) {
    // 更新基础数据
    dangerList.value = parsedData.data?.dangerList || null;
    redangerList.value = parsedData.data?.redangerList || null;
    dangerChartData.value = parsedData.data?.dangerChartData || null;
    redangerChartData.value = parsedData.data?.redangerChartData || null;
    
    // 更新顶部统计
    updateSumItem();
    
    // 更新告警列表
    updateDataSource();
    
    // 更新预警列表
    updateReDangers();

    optionChart1.value = createChart1Option();
    optionChart2.value = createChart2Option();
    console.log(optionChart1.value);
    console.log(optionChart2.value);
    // 更新图表
    nextTick(() => {
        updateCharts();
    })
    loading.value = false;
}
// 更新顶部统计
function updateSumItem() {
    const dangerCount = dangerList.value?.listCount || {};
    const reDangerCount = redangerList.value?.length || 0;
    
    sum_item.value = [
        { title: '预警', value: reDangerCount, icon: importdanger },
        { title: '未处理告警', value: dangerCount.count0 || 0, icon: importunprocessed },
        { title: '已处理告警', value: dangerCount.count1 || 0, icon: importprocessed },
        { title: '所有告警', value: dangerCount.count2 || 0, icon: importall }
    ];
}
// 更新告警列表数据
function updateDataSource() {
    const listData = dangerList.value?.listData;
    
    if (!listData) {
        // 使用默认数据（仅在没有真实数据时）
        dataSource.value = [
    {
        key: '1',
        name: 'CPU使用率过高',
        content: '服务器CPU使用率超过90%',
        time: '2023-10-01 12:00:00',
        level: 'safe',
    },
    {
        key: '2',
        name: '内存泄漏',
        content: '应用程序内存使用异常增长应用程序内存使用异常增长应用程序内存使用异常增长应用程序内存使用异常增长应用程序内存使用异常增长应用程序内存使用异常增长',
        time: '2023-10-01 12:05:00',
        level: 'danger1'
    },
    {
        key: '3',
        name: '磁盘空间不足',
        content: '服务器磁盘空间低于10%',
        time: '2023-10-01 12:10:00',
        level: 'danger2'
    },
    {
        key: '4',
        name: 'CPU使用率过高',
        content: '服务器CPU使用率超过90%',
        time: '2023-10-01 12:00:00',
        level: 'safe'
    },
    {
        key: '5',
        name: '内存泄漏',
        content: '应用程序内存使用异常增长',
        time: '2023-10-01 12:05:00',
        level: 'danger1'
    },
    {
        key: '6',
        name: '磁盘空间不足',
        content: '服务器磁盘空间低于10%',
        time: '2023-10-01 12:10:00',
        level: 'danger2'
    },
    {
        key: '7',
        name: '内存泄漏',
        content: '应用程序内存使用异常增长',
        time: '2023-10-01 12:05:00',
        level: 'danger1'
    }
        ];
        return;
    }
    // 映射真实数据
    dataSource.value = listData.map((item) => ({
        key: item.id, // 注意：使用 type_id 而不是 typeId
        name: item.title,
        content: item.content,
        time: item.time,
        level: item.status
    }));
}

// 更新预警列表数据
function updateReDangers() {
    if (!redangerList.value) {
        // 使用默认数据（仅在没有真实数据时）
        reDangers.value = [
            { id: 1, type: "CPU 占用过高", message: "CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%", timestamp: Date.now() - 2000 },
            { id: 2, type: "内存占用警告", message: "内存占用率达到 75%", timestamp: Date.now() - 5000 },
            { id: 3, type: "磁盘空间低",  message: "磁盘空间剩余 10GB", timestamp: Date.now() - 10000 },
            { id: 4, type: "CPU 占用过高",  message: "CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%", timestamp: Date.now() - 2000 },
            { id: 5, type: "内存占用警告",  message: "内存占用率达到 75%", timestamp: Date.now() - 5000 },
            { id: 6, type: "磁盘空间低",  message: "磁盘空间剩余 10GB", timestamp: Date.now() - 10000 },
            { id: 7, type: "CPU 占用过高",  message: "CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%CPU 占用率超过 90%", timestamp: Date.now() - 2000 },
            { id: 8, type: "内存占用警告",  message: "内存占用率达到 75%", timestamp: Date.now() - 5000 },
            { id: 9, type: "磁盘空间低",  message: "磁盘空间剩余 10GB", timestamp: Date.now() - 10000 }
        ];
        return;
    }
    // 映射真实数据
    reDangers.value = redangerList.value.map((item) => ({
        id: item.id,
        name: item.name,
        message: item.message,
        timestamp: new Date(`2025-07-26 ${item.timestamp}`).getTime() // 转换为时间戳
    }));
}

// 更新图表
function updateCharts() {
    // 在下一个tick更新图表
    nextTick(() => {
        // 确保图表实例存在
        if (!myChart1 && chartRef1.value) {
            myChart1 = echarts.init(chartRef1.value);
        }
        if (!myChart2 && chartRef2.value) {
            myChart2 = echarts.init(chartRef2.value);
        }
        
        // 更新图表
        if (myChart1) {
            myChart1.setOption(optionChart1.value, true); // 使用true清空旧配置
        }
        if (myChart2) {
            myChart2.setOption(optionChart2.value, true); // 使用true清空旧配置
        }
    });
}

// 创建图表1配置
function createChart1Option() {
    if (!dangerChartData.value) {
        return {
            title: {
                text: '告警趋势图',
                left: '20px',
                textStyle: {
                    color: 'rgba(0, 81, 255, 1)',
                    fontSize: 20,
                    fontWeight: '800'
                }
            },
            legend: {
                data: ['所有告警', '重要告警'],
                left: 'right',
                top: 'top',
                textStyle: {
                    color: '#333'
                }
            },
            xAxis: {
                type: 'category',
                data: ['2025-07-04','2025-07-05','2025-07-06','2025-07-07','2025-07-08','2025-07-09','2025-07-10']
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: '所有告警',
                    data: [120, 200, 150, 90, 120, 110, 130],
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: 'rgba(0, 81, 255, 0.2)',
                        opacity: 0.5
                    },
                    lineStyle: {
                        color: 'rgba(0, 81, 255, 1)',
                        width: 2
                    },
                    itemStyle: {
                        type: 'dashed',
                        width: 2,
                        color: 'rgba(0, 81, 255, 1)'
                    }
                },
                {
                    name: '重要告警',
                    data: [50, 20, 60, 80, 70, 80, 100],
                    type: 'line',
                    smooth: true,
                    areaStyle: {
                        color: 'rgba(255, 0, 0, 0.2)',
                        opacity: 0.5
                    },
                    lineStyle: {
                        color: 'rgba(255, 0, 0, 1)',
                        width: 2
                    },
                    itemStyle: {
                        type: 'dashed',
                        width: 2,
                        color: 'rgba(255, 0, 0, 1)'
                    }
                }
            ]
        };
    }
    
    return {
        title: {
            text: '告警趋势图',
            left: '20px',
            textStyle: {
                color: 'rgba(0, 81, 255, 1)',
                fontSize: 20,
                fontWeight: '800'
            }
        },
        legend: {
            data: ['所有告警', '重要告警'],
            left: 'right',
            top: 'top',
            textStyle: {
                color: '#333'
            }
        },
        xAxis: {
            type: 'category',
            data: dangerChartData.value.timedata || []
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: '所有告警',
                data: dangerChartData.value.alldanger || [],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: 'rgba(0, 81, 255, 0.2)',
                    opacity: 0.5
                },
                lineStyle: {
                    color: 'rgba(0, 81, 255, 1)',
                    width: 2
                },
                itemStyle: {
                    type: 'dashed',
                    width: 2,
                    color: 'rgba(0, 81, 255, 1)'
                }
            },
            {
                name: '重要告警',
                data: dangerChartData.value.imdanger || [],
                type: 'line',
                smooth: true,
                areaStyle: {
                    color: 'rgba(255, 0, 0, 0.2)',
                    opacity: 0.5
                },
                lineStyle: {
                    color: 'rgba(255, 0, 0, 1)',
                    width: 2
                },
                itemStyle: {
                    type: 'dashed',
                    width: 2,
                    color: 'rgba(255, 0, 0, 1)'
                }
            }
        ]
    };
}

// 创建图表2配置
function createChart2Option() {
    if (!redangerChartData.value) {
        return {
            title: {
                text: '预警占比图',
                left: '20px',
                textStyle: {
                    color: 'rgba(0, 81, 255, 1)',
                    fontSize: 20,
                    fontWeight: '800'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '8%',
                left: 'center'
            },
            series: [
                {
                    name: '各预警占比',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    padAngle: 5,
                    itemStyle: {
                        borderRadius: 10
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: 'CPU'},
                        { value: 735, name: 'disk'},
                        { value: 580, name: 'mem'},
                        { value: 484, name: 'diskio'},
                        { value: 300, name: 'system'}
                    ]
                }
            ] 
        };
    }
    
    return {
        title: {
            text: '预警占比图',
            left: '20px',
            textStyle: {
                color: 'rgba(0, 81, 255, 1)',
                fontSize: 20,
                fontWeight: '800'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '8%',
            left: 'center'
        },
        series: [
            {
                name: '各预警占比',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: redangerChartData.value || []
            }
        ] 
    };
}

// 渲染Markdown内容
const renderMarkdown = (content) => {
    return marked.parse(content); // 将markdown转为HTML
}
// ========================== 接口部分 ==========================
// header
const sum_item = ref([
    { title: '预警', value: 0, icon: importdanger },
    { title: '未处理告警', value: 0, icon: importunprocessed },
    { title: '已处理告警', value: 0, icon: importprocessed },
    { title: '所有告警', value: 0, icon: importall }
]);
const dataSource = ref([]);
const reDangers = ref([]);
const chartRef1 = ref(null);
const chartRef2 = ref(null);
let myChart1 = null;
let myChart2 = null;
// 告警列表数据
const columns = ref([
    {
        title: '告警名称',
        dataIndex: 'name',
        key: 'name',
        width: '150px',
        fixed: 'left'
    },
    {
        title: '告警级别',
        dataIndex: 'level',
        key: 'level',
        width: '150px',
        fixed: 'left',
        filters: [
            { text: '已处理', value: 'safe' },
            { text: '重要', value: 'danger1' },
            { text: '普通', value: 'danger2' }
        ],
        onFilter: (value, record) => record.level.indexOf(value) === 0
    },
    {
        title: '告警时间',
        dataIndex: 'time',
        key: 'time',
        width: '200px',
        fixed: 'left'
    },
    {
        title: '告警参数',
        dataIndex: 'content',
        key: '1',
    },
    {
        title: '操作',
        key: 'action',
        width: '100px',
        fixed: 'right',
    }
])


const initSocket = () => {
    socket.value = io('http://192.168.31.96:5000', {
        transports: ['websocket', 'polling'],
        reconnection: true,
        reconnectionAttempts: Infinity,
        reconnectionDelay: 1000
    });
    
    // 添加连接错误处理
    socket.value.on('connect_error', (error) => {
        console.error('WebSocket连接错误:', error);
        loading.value = false
    });
    
    socket.value.on('connect', () => {
        console.log("Socket.IO 连接成功");
        
        socket.value.emit("client_server1", "dangerBoard");
    });
    
    socket.value.on('alert_update1', (payload) => {
        try {
            const parsed = typeof payload === 'string' ? JSON.parse(payload) : payload;
            console.log('解析后的数据:', parsed);
            
            if (parsed?.code === 200) {
                // 使用深拷贝避免循环引用
                const dataCopy = deepCopy(parsed);
                data.value = dataCopy;
                console.log('data 已更新:', data.value);
                
                // 更新所有数据
                updateAllData(dataCopy);
            } else {
                console.error('无效的数据格式', parsed);
            }
        } catch (e) {
            console.error('数据处理失败', e);
        }
    });
};

onBeforeUnmount(() => {
    if (myChart1) {
        myChart1.dispose();
        myChart1 = null;
    }
    if(myChart2){
        myChart2.dispose();
        myChart2 = null;
    }
});

const handleTableFilterChange = (pagination, filters) => {
    console.log('params', pagination, filters);
};

// ==================== 总报告窗口 =========================
const dialogAllPaperVis = ref(false)
const showAllPaperDialog = async() => {
    const response = await axios.get('http://192.168.31.56:9000/allUpdatePaper');
    allUpdatePaperCon.value = response.data;
    console.log(allUpdatePaperCon.value);
    dialogAllPaperVis.value = true
}
// ==================== 告警对话框弹出 ==========================
const dialogDangerVis = ref(false)
const dangerDialogRef = ref(null)
const showDangerDetailDialog = (record) => {
    ganderItemData.value = {
        key: record.key,
        name: record.name,
        content: record.content,
        time: record.time,
        level: record.level
}
    console.log('aaa',ganderItemData.value);
    
    dialogDangerVis.value = true
}
// =================预警对话框弹出=============================
const dialogVisible = ref(false)
const dialogTitle = ref("")
const warningId = ref(null);

function handleAction(warning) {
    warningId.value = warning.id;
    dialogVisible.value = true;
    dialogTitle.value = warning.type;
}
const reDangerDialogRef = ref(null)


const handleSumItemClick = (item) => {
    if (item.title === '预警') {
        const element = document.getElementById('reDangerList')
        if (element) {
            element.scrollIntoView({ behavior: 'smooth' })
        }
    }
}
const formatTime = (timestamp) => {
    const date = new Date(timestamp);
    return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
</script>


<template>
    <div id="dangerBoard-content" class="dangerBoard-content">
        <h1>告警管理</h1>
        <div class="hander_d">
            <div class="sum_item_d" :class="[item.title === '预警'? 'sum_item_reDanger' : '' ]" v-for="(item,index) in sum_item" :key="index" @click="handleSumItemClick(item)">
                <div class="sum_item_text" :class="[item.title === '预警'? 'sum_item_text_reDanger' : '' ]">
                    <h3>{{ item.value }}</h3>
                    <p>{{ item.title }}</p>
                </div>
                <div class="sum_item_img">
                    <img :src="item.icon" alt="">
                </div>
            </div>
        </div>
        <hr class="hr">
        <div class="dangerList">
            <h3>告警列表</h3>
            <el-button class="allUpdatePaper" type="primary" @click="showAllPaperDialog()">
                查看告警总报告
            </el-button>
            <a-table :dataSource="dataSource" :columns="columns" :pagination="{ pageSize: 6 }" :scroll="{ x: 'max-content' }" @onChange="handleTableFilterChange">
                <template #bodyCell="{ column, record }">
                    <span v-if="column.dataIndex === 'level'">
                        <a-tag :color="record.level === 'safe' ? 'processing' : record.level === 'danger1' ? 'error' : 'warning'">
                            {{ record.level === 'safe' ? '已处理' : record.level === 'danger1' ? '重要' : '普通' }}
                        </a-tag>
                    </span>
                    <template v-if="column.key === 'action'">
                        <a-button type="primary" size="small" @click="showDangerDetailDialog(record)">查看</a-button>
                    </template>
                </template>
            </a-table>
        </div>
        <div class="redangerList" id="reDangerList">
            <h3>预警列表</h3>
            <div class="redangerList-list">
                <div
                    v-for="(warning) in reDangers"
                    :key="warning.id"
                    class="reDanger-card"
                    @click="handleAction(warning)"
                >
                    <div class="reDanger-header">
                        <span class="reDanger-type">
                            {{ warning.type }}
                        </span>
                        <span class="reDanger-time">{{ formatTime(warning.timestamp) }}</span>
                    </div>
                    <p class="reDanger-message">{{ warning.message }}</p>
                </div>
            </div>
            
        </div>
        <div class="dangerChart">
            <!-- ECharts 图表可以在这里添加 -->
            <div ref="chartRef1" class="charts"></div>
            <div class="cutting"></div>
            <div ref="chartRef2" class="charts"></div>
        </div>
        <div class="reDangerDialog-content">
            <el-dialog
                v-model="dialogVisible"
                :title="dialogTitle"
                width="80%"
                custom-class="full-height-dialog"
            >
                <re-danger-dialog class="re-danger-dialog" ref="reDangerDialogRef" v-if="dialogVisible" :waring-id="warningId"></re-danger-dialog>
            </el-dialog>
        </div>
        <div class="dangerDialog-content">
            <el-dialog
                v-model="dialogDangerVis"
                :title="alertDetail"
                width="80%"
                custom-class="full-height-dialog"
            >
                <danger-detail-dialog class="danger-detail-dialog" ref="dangerDialogRef" v-if="dialogDangerVis" :gander-item-data="ganderItemData" ></danger-detail-dialog>
            </el-dialog>
        </div>
        <div class="allUpdatePaper-content">
            <el-dialog
                v-model="dialogAllPaperVis"
                :title="allPaperTitle"
                width="80%"
                custom-class="full-height-dialog"
                v-if="dialogAllPaperVis"
            >
                <div v-html="renderMarkdown(allUpdatePaperCon)"></div>
            </el-dialog>
        </div>
    </div>
</template>

<style>
.dangerBoard-content {
    width: 100%;
    /* height: 100%; */
}
.dangerBoard-content h1 {
    font-size: 36px;
    color: rgb(0, 81, 255);
    margin-bottom: 20px;
    font-weight: 750;
}
.dangerBoard-content .hander_d {
    width: 100%;
    height: 120px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}
.hander_d .sum_item_d {
    position: relative;
    width: 20%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 10px;
    background-color: rgb(236, 245, 255);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    cursor: pointer;
}
.hander_d .sum_item_reDanger {
    background-color: rgb(255, 224, 206);
}

.hander_d .sum_item_d:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}
.sum_item_d .sum_item_text {
    display: inline-block;
    width: 150px;
}
.sum_item_d .sum_item_text h3 {
    font-size: 30px;
    color: rgb(0, 81, 255);
}
.sum_item_d .sum_item_text_reDanger h3 {
    color: rgb(255, 0, 0);
}
.sum_item_d .sum_item_img {
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 30px;
    text-align: center;
}
.sum_item_d .sum_item_img img {
    width: 30px;
    height: 30px;
}

 .hr {
    margin: 20px 0;
    border: none;
    border-top: 1px solid #e0e0e0;
 }
.dangerList {
    margin-top: 10px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: calc(100% - 230px);
    position: relative;
}
.dangerList .allUpdatePaper {
    position: absolute;
    top: 20px;
    right: 30px;
}
.dangerList h3 , .redangerList h3{
    font-size: 24px;
    color: rgb(0, 81, 255);
    font-weight: 800;
    margin-bottom: 20px;
}
.dangerChart {
    display: flex;
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 400px;
    justify-content: space-between;
    align-items: center;
}
.charts {
    width: 47.5%;
    height: 100%;
}
.cutting {
    display: inline;
    height: 100%;
    width: 1px;
    border: 1px solid #efefef;
}

.redangerList {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  max-height: 600px;
  padding: 20px;
  border-radius: 10px;
}
.redangerList-list {
    max-height: 500px;
    overflow: auto;
    padding-top: 10px;
}
.reDangerDialog-content {
    width: 80vh;
    /* height: 80vh; */
}
.dangerDialog-content {
    width: 80vw;
}
.allUpdatePaper-content {
    width: 80vw;
}
.allUpdatePaper-content h1 {
    color: #000;
}
.allUpdatePaper-content div {
    padding: 20px;
}
.reDanger-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  padding: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.reDanger-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* .reDanger-card.high {
  border-left: 4px solid red;
}

.reDanger-card.medium {
  border-left: 4px solid yellow;
}

.reDanger-card.low {
  border-left: 4px solid green;
} */

.reDanger-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.reDanger-type {
  font-weight: bold;
  font-size: 1.1em;
  display: flex;
  align-items: center;
}

.reDanger-type i {
  margin-right: 8px;
}

.reDanger-time {
  font-size: 0.9em;
  color: #777;
}

.reDanger-message {
  font-size: 1em;
  margin: 12px 0;
}
.el-dialog__header {
    color: rgb(0, 81, 255) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
}
.full-height-dialog .el-dialog__body {
    height: 65vh !important; 
    padding: 20px;
}
.full-height-dialog .el-dialog {
    position: fixed;
    top: 30% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.re-danger-dialog {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.danger-detail-dialog {
    height: 100%;
    min-height: 500px;
}


@media screen and (max-width: 1350px) {
    .dangerBoard-content h1 {
        font-size: 32px;
        text-align: left;
    }
    .dangerBoard-content .hander_d {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
    }
    .hander_d .sum_item_d {
        width: 45%;
        margin-bottom: 15px;
        margin-right: 5%;
    }
    .hander_d .sum_item_d:nth-child(2n) {
        margin-right: 0; /* 每行最后一个 item 去掉右侧间隔 */
    }
    .sum_item_d .sum_item_text {
        width: auto;
        text-align: center;
    }
    .sum_item_d .sum_item_text h3 {
        font-size: 26px;
    }
    .sum_item_d .sum_item_img {
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
    }
    .sum_item_d .sum_item_img img {
        width: 25px;
        height: 25px;
    }
    .dangerList {
        padding: 15px;
        height: auto;
    }
    .dangerList h3 {
        font-size: 22px;
        text-align: left;
    }
    .dangerChart {
        padding: 15px;
        height: 350px;
    }
}

@media screen and (max-width: 750px) {
    .dangerBoard-content h1 {
        font-size: 28px;
        text-align: center;
    }
    .dangerBoard-content .hander_d {
        flex-direction: column;
        height: auto;
    }
    .hander_d .sum_item_d {
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
    }
    .sum_item_d .sum_item_text {
        width: auto;
        text-align: center;
    }
    .sum_item_d .sum_item_text h3 {
        font-size: 24px;
    }
    .sum_item_d .sum_item_img {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
    }
    .sum_item_d .sum_item_img img {
        width: 20px;
        height: 20px;
    }
    .dangerList {
        padding: 10px;
        height: auto;
    }
    .dangerList h3 {
        font-size: 20px;
        text-align: center;
    }
    .dangerChart {
        padding: 10px;
        height: auto;
    }
}
</style>
